<template>
    <div class="map-warp" v-show="isMap">
        <div class="top">
            <div class="back">
                <span @click="onBack">返回</span>
            </div>
            <div class="send">
                <span @click="onSend">发送</span>
            </div>
        </div>
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
        :src="`http://172.17.10.95:8080/locationPicker.html?search=1&type=1&coordtype=3&coord=${Number(center)}&key=EFPBZ-AY46V-E4JPW-UFSAA-MVRE2-LQBXJ&referer=chat`">
        </iframe>
    </div>
</template>

<script>
export default {
    name: 'MapWarp',
    props: {
        isMap: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            zoom: 16,
            center: '29.832714,114.321259',
            adress: {}
        }
    },
    methods: {
        onBack() {
            this.$emit('onBack')
        },
        onSend() {
            if(this.adress != {}) {
                this.$emit('onSend',this.adress.poiaddress,3)
                this.$emit('onBack')
            }
        }
    },
    created() {
        let that = this
        window.addEventListener('message', function(event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                that.adress = loc
            }
        }, false);
    },
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.map-warp{
    position: fixed;
    z-index:99999;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:5px 10px;
        background:#fff;
        color:#11D6BB;
        font-size:14px;
    }
}

</style>